<template>
  <div class="class-attendance">
    <div class="header">
      <h2>班级考勤管理</h2>
      <div class="header-actions">
        <el-button type="primary" @click="startClassAttendance">开始考勤</el-button>
        <el-button @click="showAddStudentDialog = true">添加学生</el-button>
        <el-button @click="showImportDialog = true">导入学生</el-button>
        <el-button @click="showHistoryDialog = true">历史记录</el-button>
        <el-button @click="showSummaryDialog = true">查看总结</el-button>
        <el-button @click="goBack">返回考勤</el-button>
      </div>
    </div>

    <!-- 统计信息 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card>
          <div class="stat-item">
            <div class="stat-label">总人数</div>
            <div class="stat-value">{{ students.length }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="stat-item">
            <div class="stat-label">已到人数</div>
            <div class="stat-value present">{{ presentCount }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="stat-item">
            <div class="stat-label">缺勤人数</div>
            <div class="stat-value absent">{{ absentCount }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="stat-item">
            <div class="stat-label">请假人数</div>
            <div class="stat-value leave">{{ leaveCount }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 考勤状态 -->
    <div v-if="isChecking" class="checking-status">
      <el-alert
        title="正在进行班级考勤"
        type="info"
        :closable="false"
        show-icon
      />
    </div>

    <!-- 学生列表 -->
    <el-card class="student-list-card">
      <template #header>
        <div class="card-header">
          <span>学生名单 ({{ students.length }}人)</span>
          <div class="header-actions">
            <el-button v-if="!isChecking" type="warning" @click="clearAllStudents">清空学生</el-button>
            <el-button v-if="isChecking" type="success" @click="finishClassAttendance">完成考勤</el-button>
            <el-button v-if="isChecking" @click="cancelCheck">取消</el-button>
          </div>
        </div>
      </template>

      <el-table :data="students" style="width: 100%" v-loading="loading">
        <el-table-column prop="studentId" label="学号" min-width="120" />
        <el-table-column prop="name" label="姓名" min-width="120" />
        <el-table-column prop="className" label="班级" min-width="120" />
        <el-table-column prop="contact" label="联系方式" min-width="150" />
        <el-table-column prop="checkStatus" label="考勤状态" min-width="120">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.checkStatus)">
              {{ getStatusText(row.checkStatus) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="280">
          <template #default="{ row, $index }">
            <el-button-group>
              <template v-if="isChecking">
                <el-button size="small" type="success" @click="setStudentStatus(row, 'present')">已到</el-button>
                <el-button size="small" type="warning" @click="setStudentStatus(row, 'leave')">请假</el-button>
                <el-button size="small" type="danger" @click="setStudentStatus(row, 'absent')">缺勤</el-button>
              </template>
              <template v-else>
                <el-button size="small" @click="editStudent(row, $index)">编辑</el-button>
                <el-button size="small" type="danger" @click="deleteStudent($index)">删除</el-button>
              </template>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 历史记录对话框 -->
    <el-dialog v-model="showHistoryDialog" title="班级考勤历史记录" width="80%">
      <el-table :data="classAttendanceHistory" style="width: 100%">
        <el-table-column prop="date" label="日期" min-width="120" />
        <el-table-column prop="time" label="时间" min-width="120" />
        <el-table-column prop="total" label="总人数" min-width="80" />
        <el-table-column prop="present" label="已到人数" min-width="100" />
        <el-table-column prop="absent" label="缺勤人数" min-width="100" />
        <el-table-column prop="leave" label="请假人数" min-width="100" />
        <el-table-column label="操作" min-width="120">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="viewClassAttendanceDetail(row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 考勤详情对话框 -->
    <el-dialog v-model="showDetailDialog" title="班级考勤详情" width="60%">
      <div v-if="currentDetail" class="attendance-detail">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="日期">{{ currentDetail.date }}</el-descriptions-item>
          <el-descriptions-item label="时间">{{ currentDetail.time }}</el-descriptions-item>
          <el-descriptions-item label="总人数">{{ currentDetail.total }}人</el-descriptions-item>
          <el-descriptions-item label="已到人数">{{ currentDetail.present }}人</el-descriptions-item>
          <el-descriptions-item label="缺勤人数">{{ currentDetail.absent }}人</el-descriptions-item>
          <el-descriptions-item label="请假人数">{{ currentDetail.leave }}人</el-descriptions-item>
        </el-descriptions>

        <h4 style="margin-top: 20px; margin-bottom: 10px;">详细名单</h4>
        <el-table :data="currentDetail.students" style="width: 100%">
          <el-table-column prop="studentId" label="学号" min-width="120" />
          <el-table-column prop="name" label="姓名" min-width="120" />
          <el-table-column prop="className" label="班级" min-width="120" />
          <el-table-column prop="status" label="状态" min-width="100">
            <template #default="{ row }">
              <el-tag :type="getStatusType(row.status)">
                {{ getStatusText(row.status) }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>

    <!-- 总结对话框 -->
    <el-dialog v-model="showSummaryDialog" title="班级考勤总结" width="60%">
      <div class="summary-content">
        <el-tabs v-model="summaryTab">
          <el-tab-pane label="日总结" name="daily">
            <div v-if="dailySummary" class="summary-section">
              <h3>今日班级考勤总结</h3>
              <el-descriptions :column="2" border>
                <el-descriptions-item label="日期">{{ dailySummary.date }}</el-descriptions-item>
                <el-descriptions-item label="总人数">{{ dailySummary.total }}人</el-descriptions-item>
                <el-descriptions-item label="已到人数">{{ dailySummary.present }}人</el-descriptions-item>
                <el-descriptions-item label="缺勤人数">{{ dailySummary.absent }}人</el-descriptions-item>
                <el-descriptions-item label="请假人数">{{ dailySummary.leave }}人</el-descriptions-item>
                <el-descriptions-item label="出勤率">{{ Math.round((dailySummary.present / dailySummary.total) * 100) }}%</el-descriptions-item>
              </el-descriptions>
            </div>
          </el-tab-pane>
          <el-tab-pane label="周总结" name="weekly">
            <div v-if="weeklySummary" class="summary-section">
              <h3>本周班级考勤总结</h3>
              <el-descriptions :column="2" border>
                <el-descriptions-item label="统计周期">{{ weeklySummary.startDate }} 至 {{ weeklySummary.endDate }}</el-descriptions-item>
                <el-descriptions-item label="考勤次数">{{ weeklySummary.totalChecks }}次</el-descriptions-item>
                <el-descriptions-item label="平均出勤人数">{{ weeklySummary.avgPresent }}人</el-descriptions-item>
                <el-descriptions-item label="平均缺勤人数">{{ weeklySummary.avgAbsent }}人</el-descriptions-item>
                <el-descriptions-item label="平均请假人数">{{ weeklySummary.avgLeave }}人</el-descriptions-item>
                <el-descriptions-item label="平均出勤率">{{ Math.round((weeklySummary.avgPresent / students.length) * 100) }}%</el-descriptions-item>
              </el-descriptions>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>

    <!-- 导入学生对话框 -->
    <el-dialog v-model="showImportDialog" title="导入学生数据" width="50%">
      <div class="import-dialog-content">
        <el-alert
          title="支持从Excel复制粘贴导入"
          type="info"
          description="请从Excel中复制学生数据，直接粘贴到下方文本框中。系统会自动识别姓名、学号、联系方式。格式：姓名 学号 联系方式"
          show-icon
          :closable="false"
          style="margin-bottom: 15px;"
        />
        
        <el-form label-position="top">
          <el-form-item label="学生数据">
            <el-input
              v-model="importText"
              type="textarea"
              :rows="8"
              placeholder="请直接从Excel复制粘贴学生数据到这里

标准格式：
姓名 学号 联系方式
学生A 2021001 13800138001
学生B 2021002 13800138002
学生C 2021003 13800138003

或者：
计算机1班
1 学生A 2021001 13800138001
2 学生B 2021002 13800138002"
            />
          </el-form-item>
        </el-form>
        
        <div class="import-tips">
          <h4>支持的格式示例：</h4>
          <ul>
            <li><strong>标准格式：姓名 学号 联系方式</strong></li>
            <li>张三 2021001 13800138001</li>
            <li>完整格式：1 张三 2021001 13800138001</li>
            <li>班级信息：计算机1班（可单独一行或在数据中）</li>
            <li>可以包含标题行，系统会自动跳过</li>
            <li>支持从Excel直接复制粘贴</li>
          </ul>
        </div>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showImportDialog = false">取消</el-button>
          <el-button type="primary" @click="importStudentsFromExcel">导入</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 编辑学生对话框 -->
    <el-dialog v-model="showEditDialog" title="编辑学生信息" width="40%">
      <el-form :model="editingStudent" label-width="80px">
        <el-form-item label="学号" required>
          <el-input v-model="editingStudent.studentId" placeholder="请输入学号" />
        </el-form-item>
        <el-form-item label="姓名" required>
          <el-input v-model="editingStudent.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="班级">
          <el-input v-model="editingStudent.className" placeholder="请输入班级（如：计算机1班）" />
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="editingStudent.contact" placeholder="请输入手机号或邮箱" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showEditDialog = false">取消</el-button>
          <el-button type="primary" @click="saveEditStudent">保存</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 添加学生对话框 -->
    <el-dialog v-model="showAddStudentDialog" title="添加学生" width="40%">
      <el-form :model="newStudent" label-width="80px">
        <el-form-item label="学号" required>
          <el-input v-model="newStudent.studentId" placeholder="请输入学号" />
        </el-form-item>
        <el-form-item label="姓名" required>
          <el-input v-model="newStudent.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="班级">
          <el-input v-model="newStudent.className" placeholder="请输入班级（如：计算机1班）" />
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="newStudent.contact" placeholder="请输入手机号或邮箱" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showAddStudentDialog = false">取消</el-button>
          <el-button type="primary" @click="addNewStudent">添加</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()

// 状态管理
const loading = ref(false)
const isChecking = ref(false)
const showHistoryDialog = ref(false)
const showDetailDialog = ref(false)
const showSummaryDialog = ref(false)
const showImportDialog = ref(false)
const summaryTab = ref('daily')
const currentDetail = ref(null)
const importText = ref('')
const showEditDialog = ref(false)
const editingStudent = ref({})
const editingIndex = ref(-1)
const showAddStudentDialog = ref(false)
const newStudent = ref({
  studentId: '',
  name: '',
  className: '计算机1班',
  contact: '',
  checkStatus: 'unchecked'
})

// 数据
const students = ref([])
const classAttendanceHistory = ref([])
const dailySummary = ref(null)
const weeklySummary = ref(null)

// 计算属性
const presentCount = computed(() => {
  return students.value.filter(s => s.checkStatus === 'present').length
})

const absentCount = computed(() => {
  return students.value.filter(s => s.checkStatus === 'absent').length
})

const leaveCount = computed(() => {
  return students.value.filter(s => s.checkStatus === 'leave').length
})

// 方法
const getStatusType = (status) => {
  const types = {
    present: 'success',
    absent: 'danger',
    leave: 'warning',
    unchecked: 'info'
  }
  return types[status] || 'info'
}

const getStatusText = (status) => {
  const texts = {
    present: '已到',
    absent: '缺勤',
    leave: '请假',
    unchecked: '未考勤'
  }
  return texts[status] || '未知'
}

const startClassAttendance = () => {
  isChecking.value = true
  // 重置所有学生的考勤状态
  students.value.forEach(student => {
    student.checkStatus = 'unchecked'
  })
  ElMessage.success('开始班级考勤')
}

const setStudentStatus = (student, status) => {
  student.checkStatus = status
  student.lastCheckTime = new Date().toLocaleString('zh-CN')
}

const finishClassAttendance = () => {
  const uncheckedCount = students.value.filter(s => s.checkStatus === 'unchecked').length
  if (uncheckedCount > 0) {
    ElMessage.warning(`还有${uncheckedCount}名学生未完成考勤`)
    return
  }

  // 创建考勤记录
  const now = new Date()
  const record = {
    id: Date.now(),
    date: now.toLocaleDateString('zh-CN'),
    time: now.toLocaleTimeString('zh-CN'),
    total: students.value.length,
    present: presentCount.value,
    absent: absentCount.value,
    leave: leaveCount.value,
    students: students.value.map(s => ({
      studentId: s.studentId,
      name: s.name,
      className: s.className,
      status: s.checkStatus
    })),
    timestamp: now.getTime()
  }

  // 保存记录
  classAttendanceHistory.value.unshift(record)
  saveClassAttendanceData()
  
  isChecking.value = false
  ElMessage.success('班级考勤已完成并保存')
}

const cancelCheck = () => {
  isChecking.value = false
  // 恢复之前的状态
  loadClassAttendanceData()
  ElMessage.info('已取消考勤')
}

const viewClassAttendanceDetail = (record) => {
  currentDetail.value = record
  showDetailDialog.value = true
}

const generateDailySummary = () => {
  const today = new Date().toLocaleDateString('zh-CN')
  const todayRecords = classAttendanceHistory.value.filter(record => record.date === today)
  
  if (todayRecords.length === 0) {
    dailySummary.value = null
    return
  }

  const latestRecord = todayRecords[0]
  dailySummary.value = {
    date: latestRecord.date,
    total: latestRecord.total,
    present: latestRecord.present,
    absent: latestRecord.absent,
    leave: latestRecord.leave
  }
}

const generateWeeklySummary = () => {
  const now = new Date()
  const weekStart = new Date(now.getTime() - (now.getDay() - 1) * 24 * 60 * 60 * 1000)
  const weekEnd = new Date(weekStart.getTime() + 6 * 24 * 60 * 60 * 1000)
  
  const weekRecords = classAttendanceHistory.value.filter(record => {
    const recordDate = new Date(record.date)
    return recordDate >= weekStart && recordDate <= weekEnd
  })

  if (weekRecords.length === 0) {
    weeklySummary.value = null
    return
  }

  const totalPresent = weekRecords.reduce((sum, record) => sum + record.present, 0)
  const totalAbsent = weekRecords.reduce((sum, record) => sum + record.absent, 0)
  const totalLeave = weekRecords.reduce((sum, record) => sum + record.leave, 0)

  weeklySummary.value = {
    startDate: weekStart.toLocaleDateString('zh-CN'),
    endDate: weekEnd.toLocaleDateString('zh-CN'),
    totalChecks: weekRecords.length,
    avgPresent: Math.round(totalPresent / weekRecords.length),
    avgAbsent: Math.round(totalAbsent / weekRecords.length),
    avgLeave: Math.round(totalLeave / weekRecords.length)
  }
}

const goBack = () => {
  router.push('/')
}

// 清空所有学生
const clearAllStudents = () => {
  ElMessageBox.confirm(
    '确定要清空所有学生数据吗？此操作将删除所有学生信息，包括历史考勤记录。',
    '警告',
    {
      confirmButtonText: '确定清空',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    students.value = []
    classAttendanceHistory.value = []
    saveClassAttendanceData()
    ElMessage.success('已清空所有学生数据')
  }).catch(() => {
    ElMessage.info('已取消清空操作')
  })
}

// 编辑学生
const editStudent = (student, index) => {
  editingStudent.value = { ...student }
  editingIndex.value = index
  showEditDialog.value = true
}

// 保存编辑的学生
const saveEditStudent = () => {
  if (!editingStudent.value.name || !editingStudent.value.studentId) {
    ElMessage.warning('请填写姓名和学号')
    return
  }
  
  // 检查学号是否重复（排除当前编辑的学生）
  const isDuplicate = students.value.some((student, index) => 
    index !== editingIndex.value && student.studentId === editingStudent.value.studentId
  )
  
  if (isDuplicate) {
    ElMessage.error('学号已存在，请使用其他学号')
    return
  }
  
  students.value[editingIndex.value] = { ...editingStudent.value }
  saveClassAttendanceData()
  ElMessage.success('学生信息已更新')
  showEditDialog.value = false
}

// 删除学生
const deleteStudent = (index) => {
  const student = students.value[index]
  ElMessageBox.confirm(
    `确定要删除学生 "${student.name}" (${student.studentId}) 吗？`,
    '确认删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    students.value.splice(index, 1)
    saveClassAttendanceData()
    ElMessage.success('学生已删除')
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

// 添加新学生
const addNewStudent = () => {
  if (!newStudent.value.studentId || !newStudent.value.name) {
    ElMessage.warning('请填写学号和姓名')
    return
  }
  
  // 检查学号是否已存在
  const isDuplicate = students.value.some(student => 
    student.studentId === newStudent.value.studentId
  )
  
  if (isDuplicate) {
    ElMessage.error('学号已存在，请使用其他学号')
    return
  }
  
  students.value.push({ ...newStudent.value })
  saveClassAttendanceData()
  ElMessage.success('学生添加成功')
  
  // 重置表单
  newStudent.value = {
    studentId: '',
    name: '',
    className: '计算机1班',
    contact: '',
    checkStatus: 'unchecked'
  }
  showAddStudentDialog.value = false
}

// Excel格式导入功能
const importStudentsFromExcel = () => {
  if (!importText.value.trim()) {
    ElMessage.warning('请输入学生数据')
    return
  }

  try {
    const lines = importText.value.trim().split('\n')
    const newStudents = []
    let className = '未分类班级'
    
    // 检测是否包含班级信息
    const firstLine = lines[0].trim()
    if (firstLine.includes('班') && (firstLine.includes('计算机') || firstLine.includes('软件') || firstLine.includes('网络') || firstLine.includes('电子'))) {
      className = firstLine
      lines.shift() // 移除班级行
    }
    
    // 跳过标题行（如果有）
    const startIndex = lines[0] && (lines[0].includes('序号') || lines[0].includes('姓名') || lines[0].includes('学号')) ? 1 : 0
    
    for (let i = startIndex; i < lines.length; i++) {
      const line = lines[i].trim()
      if (!line || line === '') continue
      
      // 支持多种分隔符：制表符、竖线、逗号、多个空格
      const parts = line.split(/[\t\|,]+/).map(part => part.trim()).filter(part => part)
      
      // 如果分割后数量不够，尝试用多个空格分割
      if (parts.length < 3) {
        const spaceParts = line.split(/\s{2,}/).map(part => part.trim()).filter(part => part)
        if (spaceParts.length >= parts.length) {
          parts.push(...spaceParts.slice(parts.length))
        }
      }
      
      if (parts.length >= 2) {
        let studentId = ''
        let name = ''
        let contact = ''
        
        // 智能识别各列内容
        const candidates = [...parts]
        
        // 1. 找出学号（通常是纯数字或包含数字的编号）
        const idIndex = candidates.findIndex(part => /^\d{4,}$/.test(part))
        if (idIndex !== -1) {
          studentId = candidates[idIndex]
          candidates.splice(idIndex, 1)
        } else {
          // 如果没有找到学号，尝试使用第二列作为学号
          studentId = candidates[1] || candidates[0]
        }
        
        // 2. 找出姓名（通常是纯中文）
        const nameIndex = candidates.findIndex(part => /^[\u4e00-\u9fa5]{2,4}$/.test(part))
        if (nameIndex !== -1) {
          name = candidates[nameIndex]
          candidates.splice(nameIndex, 1)
        } else {
          // 如果没有找到中文姓名，使用第一列
          name = candidates[0] || '未知姓名'
        }
        
        // 3. 剩余的内容作为联系方式
        contact = candidates.find(part => /\d{7,}/.test(part)) || ''
        
        // 4. 检测班级信息（如果在同一行）
        let studentClassName = className
        const classInfo = parts.find(part => part.includes('班') && (part.includes('计算机') || part.includes('软件') || part.includes('网络') || part.includes('电子')))
        if (classInfo) {
          studentClassName = classInfo
        }
        
        const student = {
          studentId: studentId,
          name: name,
          className: studentClassName,
          contact: contact,
          checkStatus: 'unchecked'
        }
        
        // 验证学生数据
        if (student.studentId && student.name) {
          newStudents.push(student)
        }
      }
    }
    
    if (newStudents.length === 0) {
      ElMessage.error('未找到有效的学生数据，请检查格式是否正确')
      return
    }
    
    // 检查重复学号
    const existingIds = new Set(students.value.map(s => s.studentId))
    const duplicateIds = new Set()
    const uniqueStudents = newStudents.filter(student => {
      if (existingIds.has(student.studentId) || duplicateIds.has(student.studentId)) {
        duplicateIds.add(student.studentId)
        return false
      }
      return true
    })
    
    if (duplicateIds.size > 0) {
      ElMessage.warning(`跳过${duplicateIds.size}个重复学号的学生`)
    }
    
    if (uniqueStudents.length === 0) {
      ElMessage.warning('所有学生都已存在，没有新学生被导入')
      return
    }
    
    // 添加到现有学生列表
    students.value = [...students.value, ...uniqueStudents]
    saveClassAttendanceData()
    
    ElMessage.success(`成功导入${uniqueStudents.length}名学生`)
    importText.value = ''
    showImportDialog.value = false
    
  } catch (error) {
    ElMessage.error('导入失败：' + error.message)
  }
}

// 数据持久化
const saveClassAttendanceData = () => {
  localStorage.setItem('classAttendanceStudents', JSON.stringify(students.value))
  localStorage.setItem('classAttendanceHistory', JSON.stringify(classAttendanceHistory.value))
}

const loadClassAttendanceData = () => {
  const savedStudents = localStorage.getItem('classAttendanceStudents')
  const savedHistory = localStorage.getItem('classAttendanceHistory')
  
  if (savedStudents) {
    students.value = JSON.parse(savedStudents)
  } else {
    // 初始化为空数组，无示例数据
    students.value = []
  }
  
  if (savedHistory) {
    classAttendanceHistory.value = JSON.parse(savedHistory)
  }
}

// 生命周期
onMounted(() => {
  loadClassAttendanceData()
  generateDailySummary()
  generateWeeklySummary()
})
</script>

<style>
.class-attendance {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
  width: 100%;
  box-sizing: border-box;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  width: 100%;
  box-sizing: border-box;
}

.header h2 {
  margin: 0;
  color: #303133;
}

.header-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.stats-row {
  margin-bottom: 20px;
  width: 100%;
}

.stat-item {
  text-align: center;
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.stat-value.present {
  color: #67c23a;
}

.stat-value.absent {
  color: #f56c6c;
}

.stat-value.leave {
  color: #e6a23c;
}

.checking-status {
  margin-bottom: 20px;
  width: 100%;
}

.student-list-card {
  margin-bottom: 20px;
  width: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.summary-content {
  min-height: 300px;
  width: 100%;
}

.summary-section {
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
}

.attendance-detail {
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
}

.import-dialog-content {
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

.import-tips {
  background-color: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
  margin-top: 15px;
}

.import-tips h4 {
  margin: 0 0 10px 0;
  color: #303133;
  font-size: 14px;
}

.import-tips ul {
  margin: 0;
  padding-left: 20px;
}

.import-tips li {
  color: #606266;
  font-size: 13px;
  line-height: 1.8;
}
</style>